<body>
    <link href="__PUBLIC__/Admin/css/H-ui.min.css" rel="stylesheet" type="text/css">
	<script type="text/javascript" src="__PUBLIC__/Admin/lib/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/Admin/lib/layer/1.9.3/layer.js"></script>
	<link rel="stylesheet" href="__PUBLIC__/Admin/lib/layer/1.9.3/skin/layer.css" id="layui_layer_skinlayercss">

<style type="text/css">
        * {
            font-weight: bolder !important;
        }

        .col-lg-10 {
            margin: 12px auto;
            float: none;
            overflow: auto;
        }

        .input-text, .select-box {
            border-color: #ccc;
        }

        .input-control {
            float: left;
            margin-right: 8px;
        }

        .col-lg-2 p {
            padding-top: 12px;
            width: 60px;
            font-size: 60px;
            height: 80px;
            margin: auto;
            color: #2b542c;
        }

        .col-lg-2 p:hover {
            color: #6ba462;
            cursor: pointer;
        }

        .col-lg-2 p:first-child {
            padding-top: 60px;
        }

        select option {
            padding: 4px 12px;
        }

        h3 {
            color: #0a6999;
            font-size: 20px;
        }
		.col-lg-5 {
			width: 41.66666666666667%;
		}
		.col-lg-2 {
			width: 16.666666666666664%;
		}
        #sel_1, #sel_2 {
            border: #00c393 solid 1px;
            border-radius: 4px;
            min-height: 480px;
            max-height: 480px;
            overflow: auto;
        }
		
        #sel_1 div, #sel_2 div {
            padding: 6px 4px;
            font-size: 20px;
        }

        input {
            font-size: 24px;
            font-weight: bolder;
        }

        .my_btn td {
            font-size: 30px;
            text-align: center;
        }
        .my_btn tr:nth-child(2n) td{
            padding-bottom: 60px;
        }
</style>
<div class="container" style="position: relative;">
    <div style="float: left; width: 90%;">
    <div class="col-lg-10">
        <input class="input-text radius size-XL" id="goods_total" type="text" placeholder="商品数量，不填则默认为1"/>
        <span>*单个商品数量较多时只需要写入数量即可，不需要相同商品多次扫码</span>
        <br/><br/>
        <input class="input-text radius size-XL" id="saom" name="saom" type="text" placeholder="请扫描<{:C('scanorder.lang_name')}>"/>
        <span>*按Ctrl+1将焦点移到扫描筐</span>
    </div>
    <div class="col-lg-10">
        <div class="col-lg-5">
            <h3><{:C("scanorder.lang_name")}>商品</h3>
            <div id="sel_1">
                <table class="table table-border">
                    <tr class="success">
                        <td>名称</td>
                        <td>数量</td>
                        <td>条形码</td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="col-lg-2">
        </div>
        <div class="col-lg-5">
            <h3>耗材</h3>
            <div id="sel_2">
                <table class="table table-border">
                    <tr class="success">
                        <td>名称</td>
                        <td>条形码</td>
                        <td>长宽高</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
        <div style="font-size: 24px;">
第一步：扫商品<{:C("scanorder.lang_name")}>；第二步：扫描耗材；第三步：扫描商品；第四步：扫描“确认”条形码
        </div>
    </div>
    <div style="float: left; width: 10%; padding-top: 40px;">
        <table class="my_btn">
            <tr>
                <td><img src="__PUBLIC__/Admin/images/reset.png"/></td>
            </tr>
            <tr>
                <td>重置</td>
            </tr>
            <tr>
                <td><img src="__PUBLIC__/Admin/images/common.png"/></td>
            </tr>
            <tr>
                <td>扫描商品</td>
            </tr>
            <tr>
                <td><img src="__PUBLIC__/Admin/images/confirm.png"/></td>
            </tr>
            <tr>
                <td>确认</td>
            </tr>
        </table>
        </div>
</div>
<script type="text/javascript">
    $("#saom").focus();
    $(document).keydown(function (event) {
        if (event.ctrlKey && event.keyCode == 49) {
            $("#saom").focus();
            return false;
        }
    });
    $("#goods_total").keydown(function (event) {
        if (event.keyCode == 13) {
            $("#saom").focus();
        }
    });
    var index = 0;//状态  为1  则下一步扫耗材  为0  则扫<{:C("scanorder.lang_name")}>  2---可以选择开始扫商品(也可以扫描耗材)  3---可以扫商品  4--提交
    var saom = '';//成功的<{:C("scanorder.lang_name")}>号
    $("#saom").keydown(function (event) {
        if (event.keyCode == 13) {
            if ($(this).val() == 'reset') {
                $(this).prop('value', '');
                reset();
                return false;
            }
            if ($(this).val() == 'common') {
                $(this).prop('value', '');
                change();
                return false;
            }
            if ($(this).val() == 'confirm') {
                $(this).prop('value', '');
                sub();
                return false;
            }
            if (index == 0) {
                var contr = "paking_order";
            }
            if (index == 1 || index == 2) {
                var contr = "paking_package";
            }
            if (index <= 2) {
                $.get('__CONTROLLER__/' + contr, {
                            'index': $("input[name=saom]").val(),
                        },
                        function (msg) {
                            if (msg.flag == 0) {
								play_audio_file('failed');
                                alerts(msg.data);
                            }
                            else {
                                create_data(msg, contr);
								play_audio_file('success');
                            }
                            $("#saom").prop('value', '');
                        }, 'json');
            }
            //扫描商品
            if (index == 3) {
                sm_goods($("input[name=saom]").val());
            }
            if (index == 4) {
                $("#saom").prop('value', '');
            }
        }
    });
    function sm_goods(sn) {
        for (var i = 1; i < $("#sel_1 tr").length; i++) {
            if ($("#sel_1 tr").eq(i).prop("title") == sn) {
                var num=$("#goods_total").val()*1;
                if(num==0){
                    num=1;
                }
                if ($("#sel_1 tr").eq(i).find("td:eq(1)").html() * 1 == 0) {
                    alerts('该商品已经扫描完成');
					play_audio_file('finish');
                    return false;
                }
                if($("#sel_1 tr").eq(i).find("td:eq(1)").html() * 1<num){
                    alerts('输入的商品数量大于商品剩余数量');
					play_audio_file('failed');
                    return false;
                }
                else {
                    if ($("#sel_1 tr").eq(i).find("td:eq(1)").html() * 1 == num) {
                        $("#sel_1 tr").eq(i).prop('class', 'success');
                    }
                    $("#sel_1 tr").eq(i).find("td:eq(1)").html($("#sel_1 tr").eq(i).find("td:eq(1)").html() * 1 - num);
                    alerts('商品数量成功减'+num);
					play_audio_file('success');
                    $("#saom").prop("value", '');
                    $("#goods_total").prop("value", '');
                }
                check_count();
                return false;
            }
            check_count();
        }
		play_audio_file('failed');
        alerts('该商品不在当前<{:C("scanorder.lang_name")}>中');
    }
    /////////检查是否扫描完毕，完毕之后就可以提交
    function check_count() {
        var all_count = 0;
        for (var i = 1; i < $("#sel_1 tr").length; i++) {
            all_count += $("#sel_1 tr").eq(i).find("td:eq(1)").html() * 1;
        }
        if (all_count == 0) {
            index = 4;
            $("#saom").prop('placeholder', '扫描完毕，扫描页面底部的‘确认’提交并且打印面单！');
            alerts("扫描完毕，扫描页面底部的‘确认’提交并且打印面单！")
			play_audio_file('finish');
        }
    }
    function create_data(msg, contr) {
        if (contr == "paking_order") {
            create_goods(msg.data);
            saom = $("#saom").val();
            index = 1;
            $("#saom").prop('placeholder', '请扫描耗材');
        }
        else {
            index = 2;
            $("#saom").prop('placeholder', '请扫描耗材(如果耗材已经扫描完毕，请点击“扫描商品”按钮)');
            create_package(msg.data);
        }
    }
    function create_goods(data) {
        for (var d in data) {
            var tag = "<tr title='" + data[d]['bar_code'] + "'><td>" + data[d]['goods_name'] + "</td><td>" + data[d]['goods_nums'] + "</td><td>" + data[d]['bar_code'] + "</td></tr>";
            $("#sel_1 table").append($(tag));
        }
    }
    function create_package(data) {
        var tag = "<tr title='" + data['pn'] + "'><td>" + data['name'] + "</td><td>" + data['pn'] + "</td><td>" + data['l_w_h'] + "</td></tr>";
        $("#sel_2 table").append($(tag));
    }
    function reset() {
        location.reload();
    }
    function change() {
        if (index == 2) {
            index = 3;
            $("#saom").prop('placeholder', '开始扫描商品');
			play_audio_file('success');
        }
        else {
			play_audio_file('failed');
            alerts('当前不允许操作');
        }
    }
    function sub() {
        if (index != 4) {
            alerts('当前不允许提交！');
			play_audio_file('failed');
            return false;
        }
        var package = '';
        for (var j = 1; j < $("#sel_2 tr").length; j++) {
            package += ',' + $("#sel_2 tr").eq(j).prop("title");
        }
        $.post('__CONTROLLER__/packing_post', {
            'package': package,
            'order_no': saom,
        }, function (msg) {
            if (msg.flag == 0) {
				play_audio_file('failed');
                alerts(msg.data);
            }
            else {
                alerts('提交成功！');
				play_audio_file('finish');
                <!-- setTimeout(function () { -->
                    <!-- window.open("__APP__/Collect/ems?order_no="+msg.data) -->
                <!-- }, 1000); -->
            }
        }, 'json');
    }
    function alerts(msg) {
        var index = layer.open({
            type: 0,
            title: '系统提示',
            content: msg,
            shift: 2,
            btn: ['知道了'],
            time: 1000,
            offset: '120px',
            yes: function () {
                layer.close(index);
            }
        });
        $("#saom").prop("value", '');
    }
	function play_audio_file(filename) {
        var url = "__PUBLIC__";
        if ($("audio").length == 0) {
            $("body").append($("<audio src='' autoplay></audio>"));
        }
        $("audio").attr('src', url + '/Admin/Voice/'+filename+'.wav');
    }
</script>
</body>
